<template>
  <div class="event-detail h-100P flex-column">
    <el-form label-width="80px" class="flex-sub flex-column">
      <el-form-item label="事件名称">
        <div class="flex">
          <span class="sub-title mg-right-20">{{ eventData.abilityTypeName }}</span>
          <CustomButton
            class="check-event"
            title="已处理"
            v-if="!stepActive"
            @click="handleDeal"
          ></CustomButton>
          <CustomButton
            class="check-event is-confirm"
            disabled
            title="已处理"
            v-else
          ></CustomButton>
        </div>
      </el-form-item>
      <el-form-item label="事件时间">
        <span class="sub-title">{{ eventData.createTime | dateTimeFormatter }}</span>
      </el-form-item>
      <el-form-item label="事件对象">
        <div class="sub-title">
          <div class="yell">
            <div class="plain-box mg-right-18"><span>发起</span></div>
            <span
              v-for="({productName:proName,location:lca},index) in eventDevices.yell"
              :key="index"
            >
              <span class="location mg-right-20">{{ proName || '未标识产品' }}</span>
              <span class="product-name">{{ lca || '未标识设备' }}</span>
            </span>
          </div>
          <div class="support">
            <div class="plain-box mg-right-18"><span>联动</span></div>
            <span
              class="mg-right-20"
              v-for="({productName:proName,number:num},index) in eventDevices.support"
              :key="index"
            >
              <span class="product-name">{{ proName }}</span>
              <span class="number">{{ num }}</span>
            </span>
            <!--todo 没有数据暂时隐藏-->
            <!--            <el-button type="text" class="link-text" @click="handleMoreSupportingDevices">-->
            <!--              查看明细-->
            <!--            </el-button>-->
          </div>
        </div>
      </el-form-item>
      <el-form-item label="事件状态">
        <el-steps class="step" :active="stepActive">
          <el-step title="处理中" icon="el-icon-circle-check">
            <svg-icon style="width: 23px;height: 23px;" slot="icon" icon-class="time"></svg-icon>
          </el-step>
          <el-step title="完成处理" icon="el-icon-circle-check">
            <svg-icon
              style="width: 23px;height: 23px;"
              slot="icon"
              icon-class="circle-check"
            ></svg-icon>
          </el-step>
        </el-steps>
      </el-form-item>
      <el-form-item class="flex-sub event pd-top-22" label="事件日志">
        <div class="event-log ">
          <event-log-table v-on="$listeners" :table-data="logTableData"></event-log-table>
        </div>
      </el-form-item>
    </el-form>
    <div class="justify-center">
      <el-button type="primary" @click="handleDownloadLog">
        <svg-icon icon-class="arrow-down" style="height: 14px;"></svg-icon>
        下载报告
      </el-button>
    </div>
    <ContactsDialog
      :visible.sync="contactsDialog.visible"
      :title="contactsDialog.name"
      :contacts="contactsDialog.contacts"
    />
    <SupportingDevicesDialog
      :visible.sync="supportingDevicesDialog.visible"
      :title="supportingDevicesDialog.title"
      :value="supportingDevicesDialog.value"
    />
  </div>
</template>

<script>
import EventLogTable from './event-log-table'
import ContactsDialog from './contacts-dialog'
import SupportingDevicesDialog from './supporting-devices-dialog'
import dayjs from 'dayjs'
import { ApiExportAlgEventExcelReport, apiSolveAlgEvent } from '../api.js'
import CustomButton from '@/components/custom-button'

export default {
  name: 'EventDetail',
  components: { EventLogTable, ContactsDialog, SupportingDevicesDialog, CustomButton },
  props: {
    eventData: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  mounted() {
  },
  watch: {
    'eventData.solve': {
      handler: function(val) {
        val ? (this.stepActive = 1) : (this.stepActive = 0)
      }
    }
  },
  computed: {
    logTableData() {
      return this.eventData.algEventChildVos
        ? [this.eventData, ...this.eventData.algEventChildVos]
        : [this.eventData]
    },
    eventDevices() {
      return {
        yell: [
          {
            location: this.eventData.deviceVo ? this.eventData.deviceVo.remarkName : '',
            productName: this.eventData.deviceVo ? this.eventData.deviceVo.productVo.name : ''
          }
        ],
        support: [
          {
            productName: '摄像头',
            number: this.eventData.algEventChildVos ? this.eventData.algEventChildVos.length : 0
          },
          {
            productName: '机器人',
            number: 1
          },
          {
            productName: '人员',
            number: 0
          }
        ]
      }
    }
  },
  data() {
    return {
      contactsDialogVisible: false,
      contactsDialog: {
        visible: false,
        name: '',
        contacts: []
      },
      supportingDevicesDialog: {
        visible: false,
        title: ''
      },
      stepActive: 0
    }
  },
  methods: {
    handleDeal() {
      apiSolveAlgEvent(this.eventData.id)
      this.stepActive = 1
    },
    handleMoreSupportingDevices() {
      this.supportingDevicesDialog = {
        visible: true,
        title: '联动明细',
        value: [
          {
            key: 'securityOfficer',
            name: '人员',
            tableData: [
              ...(() => {
                const mockData = []
                for (let i = 0; i < 20; i++) {
                  mockData.push({
                    name: '张三',
                    id: (Math.random() * 100).toString().replace('.', ''),
                    action: 'people'
                  })
                }
                return mockData
              })()
            ]
          },
          {
            key: 'webcam',
            name: '摄像头',
            tableData: this.eventData.algEventChildVos.map(item => {
              return { name: item.deviceVo.remarkName, id: item.deviceId, action: 'camera' }
            })
          },
          {
            key: 'robot',
            name: '机器人',
            tableData: [
              {
                name: '大道机器人',
                id: (Math.random() * 100).toString().replace('.', ''),
                action: 'robot'
              }
            ]
          }
        ]
      }
    },
    handleShowList(name, contacts) {
      this.contactsDialog = {
        visible: true,
        name,
        contacts
      }
    },
    handleDownloadLog() {
      ApiExportAlgEventExcelReport(this.eventData.id).then(res => {
        ;/=(.+\..*)/g.test(res.headers['content-disposition'].toString())
        const fileName = decodeURI(RegExp.$1)
        const url = window.URL.createObjectURL(new Blob([res.data]), {
          type: 'application/force-download'
        })
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.download = `${dayjs().format('YYYY-MM-DD-HH-mm-ss')}-${fileName}`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.event-detail {
  padding: 0 vw(20px) vh(20px) vw(20px);
  box-shadow: -1px 0 4px 0 rgba(29, 29, 29, 0.15);

  ::v-deep {
    .is-confirm {
      .custom-button.el-button {
        color: $third-title-color;
        background: white;
        border: 1px solid $third-title-color;
      }
    }

    .custom-button.el-button {
      padding: vw(4px) vw(8px);
      font-size: vw(12px);
      color: white;
      background: $link-color;
      border: 1px solid $link-color;
    }
  }

  .plain-box {
    display: inline-block;
    width: 40px;
    height: 22px;
    line-height: 20px;
    color: #666;
    text-align: center;
    border: 1px solid #666;
    border-radius: 2px;
  }

  .step {
    width: 50%;
    margin-top: vw(14px);
  }

  .contacts {
    margin-top: vw(6px);
  }

  .event-log {
    height: calc(100% - #{vw(14px)});
    margin-top: vw(4px);
  }

  ::v-deep {
    .el-form-item__label {
      font-size: vw(14px);
      color: $first-title-color;
    }

    .el-form-item {
      margin-bottom: initial;
    }

    .el-step__head {
      display: flex;
      align-items: center;
    }

    .el-step__head {
      &.is-finish,
      &.is-process {
        .el-step__icon.is-icon {
          color: $link-color;
        }
      }

      &.is-finish {
        border-color: $link-color;

        .el-step__line {
          background-color: $link-color;
        }
      }
    }

    .el-step__main {
      .el-step__title {
        font-size: vw(14px);

        &.is-process {
          font-weight: initial;
        }
      }
    }

    .event {
      .el-form-item__content {
        height: 100%;
      }
    }
  }
}
</style>
